<template>
	<div>
		<div class="top_biaoti">
			<div class="left">
				<h2>07:00场</h2>
				<span v-if="isShow">距活动开始:</span>
				<span v-else>活动进行中:</span>
				<van-count-down :time="time" @finish="finish">
				  <template #default="timeData">
				      <span class="block">{{ timeData.hours | timeFilter}}</span>
				      <span class="colon">:</span>
				      <span class="block">{{ timeData.minutes | timeFilter}}</span>
				      <span class="colon">:</span>
				      <span class="block">{{ timeData.seconds | timeFilter}}</span>
				    </template>
				</van-count-down>
			</div>
			<div class="right">
				更多
			</div>
		</div>
		<div class="slidflash" ref="aa">
			<div class="slidflash_box">
		
					<shangpin v-for="item in shujv_shangpin" :key="item.id" :goods="item"></shangpin>
		
				<!-- <div v-for="item,index in 30" :key="index">{{item}}</div> -->
			</div>
		</div>
	</div>
	
</template>

<script>
	import BScroll from '@better-scroll/core'
	import shangpin from './shangpin'
	export default {
		name:'slidflash',
		components:{shangpin},
		props:["shujv_shangpin"],
		data() {
		    return {
			  time:0,
			  isShow:true
		    }
		},
		methods:{
			timer(){
				let date = new Date()
				let now = date.getTime()//当前时间戳
				let y = date.getFullYear()
				let m = date.getMonth()+1
				let d = date.getDate()
				let h = date.getHours()
				console.log(h)
				let aa= new Date(`${y}/${m}/${d} 7:00`)//获取指定时间的时间戳
				let bb= new Date(`${y}/${m}/${d} 8:00`)//获取指定时间的时间戳
				let aachuo = aa.getTime()
				let bbchuo = bb.getTime()
				console.log(aa,aachuo,bb,bbchuo)
				if(h != 7 && h < 7){
					this.isShow = true
					this.time = aachuo-now
				}else if(h != 7 && h > 7){
					this.isShow = true
					let number2 = aa.getTime()+24*60*60*1000
					this.time = number2-now
				}else if(h=7){
					this.isShow = false
					this.time = bbchuo - now
				}
			},
			finish(){
				this.timer()
			}
		},
		created(){
			this.timer()
		},
		mounted(){
			// this.$nextTick(()=>{
				this.scroll = new BScroll(this.$refs.aa, {
								scrollX:true,
								eventPassthrough:"vertical"
						})
				// })
			
		},
		
		// watch:里边写函数，他的作用在等父传过来的数据后执行自己内部的代码，因为数据刚发送过来后并没有直接就渲染到dom中所以要用this.$nextTick等一会在进行new，因为dom元素没有更新完父盒子就不会被撑开所以就会划不动
		watch:{
			shujv_shangpin(){
				// console.log(this)
				this.$nextTick(()=>{
					
					this.scroll.refresh()
					// new BScroll('.slidflash',{
					// 	scrollX:true
					// })
			})
				
			}
		}
	}
</script>

<style scoped lang="less">
	// @green = #3cb963
	.top_biaoti{
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: space-between;
		.left{
			box-sizing: border-box;
			padding: 10px;
			width: 280px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			 .colon {
			    display: inline-block;
			    margin: 0 4px;
			    color: #ee0a24;
			  }
			  .block {
			    display: inline-block;
			    width: 22px;
			    color: #fff;
			    font-size: 12px;
			    text-align: center;
			    background-color: #ee0a24;
			  }
			h2{
				font-size: 16px;
				border-left: 5px solid #3cb963;
				padding: 0 5px;
			}
			span{
				font-size: 14px;
				color: red;
			}
			
		}
		.right{
			text-align: center;
			font-size: 14px;
			width: 70px;
			height: 30px;
			box-sizing: border-box;
			padding: 5px 10px;
			color: #3cb963;
		}
	}
	.slidflash{
		width: 100%;
		overflow:hidden;
		// white-space: nowrap;
		.slidflash_box{
			display:  inline-flex;
			&>*{
				width: 125px;
				height: 200px;
				// display: inline-block;
				// flex: none;
			}
		}
	}
</style>